<template>
  <div class="selectBox">
    <div class="title">考前预测</div>
    <el-row :gutter="50" class="box">
      <el-col :span="12" class="condtion">
        <div>
          <span>模拟分数 :</span>
          <el-input
            v-model="score"
            placeholder="请输入分数"
            style="display: inline-block;width: 200px;"
          />
        </div>
        <div>
          <span>考生类别 :</span>
          <el-radio-group v-model="kind" @change="getScoreAndRank" size="large">
            <el-radio label="理科">理科</el-radio>
            <el-radio label="文科">文科</el-radio>
          </el-radio-group>
        </div>
        <div style="text-align: right;">
          <el-button size="large" style="width: 100px;" type="warning" @click="getRank()">预测</el-button>
        </div>
      </el-col>
      <el-col :span="12" class="result">
        <div class="line">
          <span>高考分数：</span>
          <span>{{score}}分</span>
        </div>
        <div class="line">
          <span>排名区间：</span>
          <span>{{yrank}}名</span>
        </div>
      </el-col>
    </el-row>
  </div>

  <div class="controlScore">
    <div class="title">分数线</div>
    <div id="main"></div>
  </div>

  <div class="scoreAndRankTable">
    <div class="title">一分一段</div>
    <div class="tip">*本网站只提供近五年数据，数据只作为参考且不保证数据来源的真实性</div>

    <el-table
      :data="scoreAndRankData"
      border
      :header-cell-style="{  color: '#000' } "
      style="width: 100%"
    >
      <el-table-column prop="score" label="分数" align="center"></el-table-column>
      <el-table-column prop="ranking2023" label="2023年排名" align="center">
        <template v-slot="scope">{{ scope.row.ranking2023 || '暂无' }}</template>
      </el-table-column>
      <el-table-column prop="ranking2022" label="2022年排名" align="center">
        <template v-slot="scope">{{ scope.row.ranking2022 || '暂无' }}</template>
      </el-table-column>
      <el-table-column prop="ranking2021" label="2021年排名" align="center">
        <template v-slot="scope">{{ scope.row.ranking2021 || '暂无' }}</template>
      </el-table-column>
      <el-table-column prop="ranking2020" label="2020年排名" align="center">
        <template v-slot="scope">{{ scope.row.ranking2020 || '暂无' }}</template>
      </el-table-column>
      <el-table-column prop="ranking2019" label="2019年排名" align="center">
        <template v-slot="scope">{{ scope.row.ranking2019 || '暂无' }}</template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pagination"
      background
      v-model:current-page="pageNum"
      :page-size="20"
      :total="total"
      layout="prev, pager, next, jumper"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import { ElMessage, ElLoading } from 'element-plus'
import request from '@/utils/request.js'
import * as echarts from 'echarts'

const chartData = ref([])
const chartInit = () => {
  var chartDom = document.getElementById('main')
  var myChart = echarts.init(chartDom)
  var option

  option = {
    title: {
      text: '甘肃省近五年分数线',
      left: 'center',
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['本科一批', '本科二批', '专科批'],
      orient: 'vertical',
      x: 'right',
      right: 10,
      itemGap: 10,
      top: 100,
    },
    grid: {
      left: '3%',
      right: '100px',
      bottom: '3%',
      containLabel: true,
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },

    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['2019', '2020', '2021', '2022', '2023'],
    },

    yAxis: {
      type: 'value',
    },
    series: chartData.value,
  }

  option && myChart.setOption(option)
}
const total = ref(100)
const pageNum = ref(1)
const score = ref('')

const yrank = ref('-')
const kind = ref('理科')
const scoreAndRankData = ref([])
// watch(kind, (newVal, oldVal) => {})

const getRank = async () => {
  if (score.value == '') {
    ElMessage.error('请输入分数！')
    return
  }
  if (score.value < 160 || score.value > 750) {
    ElMessage.error('请输入正确的分数！预测分数区间[160,750]')
    return
  }

  try {
    const response = await request.get(
      '/scoreRank/getRank?score=' + score.value + '&type=' + kind.value
    )
    if (response.code == 200) {
      yrank.value = response.data.scoreRank.rankRange
      ElMessage.success('查询排名成功！')
    } else {
      ElMessage.error(response.message)
    }
  } catch (error) {
    ElMessage.error(error)
  }
}

const getScoreAndRank = async () => {
  const loadingInstance = ElLoading.service({
    fullscreen: true,
    text: '正在加载中...',
  })
  try {
    const res = await request.get(
      '/scoreRank/list?page=' + pageNum.value + '&type=' + kind.value
    )
    const res1 = await request.get('/scoreRank/getLine?type=' + kind.value)
    if (res1.code == 200) {
      chartData.value = res1.data
      chartInit()
    } else {
      ElMessage.error(response.message)
    }
    if (res.code === 200) {
      scoreAndRankData.value = res.data.data
      total.value = res.data.total
    } else {
      ElMessage.error(response.message)
    }
  } catch (e) {
    ElMessage.error(e)
  } finally {
    loadingInstance.close()
  }
}
const handleCurrentChange = (val) => {
  pageNum.value = val
  getScoreAndRank()
}

onMounted(() => {
  getScoreAndRank()
})
</script>

<style scoped>
.selectBox span {
  font-size: 16px;
  margin-right: 20px;
}
.tip {
  font-size: 12px;
  color: #ccc;
  margin: 5px 10px;
  padding: 5px 20px;
}
.box {
  margin: 0 !important;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 15px 25px;
  display: flex;
  justify-items: start;
  flex-direction: row;
}
.result {
  background-color: #fff9f2;
  padding: 15px 25px;
}
.result .line {
  margin: 10px 0;
}
.result .line span {
  font-weight: bold;
  color: black;
  font-size: 16px;
  margin-right: 20px;
}

.title {
  padding: 10px 15px 20px 15px;
  font-size: 20px;
  font-weight: bold;
  margin: 10px 50px;
  color: var(--theme--color);
  width: 100px;
  border-bottom: 2px solid var(--theme--color);
}
.controlScore {
  margin: 10px 50px;
}
.scoreAndRankTable {
  margin: 10px 50px;
  font-size: 16px;
}
.scoreAndRankTable .el-table {
  width: 100%;
}

.controlScore {
  margin: 0 auto;
}
.scoreAndRankTable {
  margin: 0 auto;
  font-size: 16px;
}

#main {
  background-color: #fff9f2;
  width: 100%;
  height: 400px;
  margin: 0 auto;
}
.pagination {
  justify-content: center;
}
</style>
